<template>
  <div class="wrap">
    <div class="navigator" @click="showMask = true">
      我的钱包
      <img src="@/assets/question.png" alt="" class="question" />
    </div>
    <div class="rentWrap" :style="backgroundDiv">
      <div class="cashPledge">押金:{{ shopInfo.cashPledge }}元</div>
      <p class="Expalin"><em class="yang">￥</em>{{ shopInfo.balancePrice }}</p>
      <p class="date">未到账余额：{{ shopInfo.notToBalance }}元</p>
      <div class="btnWrap">
        <p class="withdraw" @click="jumpReplyWithdraw">提现</p>
        <p class="topUp" @click="jumpBRecharge">充值</p>
      </div>
    </div>
    <div class="bottomListWrap">
      <div class="item" @click="jumpMyBill">
        <p class="textExplain">我的账单</p>
        <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
      </div>
      <div class="item" @click="jumpMyEarnings">
        <p class="textExplain">我的收益</p>
        <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
      </div>
      <div class="item" @click="jumpWthdrawRecord">
        <p class="textExplain">提现记录</p>
        <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
      </div>
      <div class="item" @click="jumpCashPledge">
        <p class="textExplain">我的押金</p>
        <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
      </div>
      <div class="item" @click="jumpBankCarList">
        <p class="textExplain">我的银行卡</p>
        <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
      </div>
      <div class="item" @click="jumpPayPassWord">
        <p class="textExplain">支付密码管理</p>
        <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
      </div>
    </div>
    <!-- 遮罩层-成为商家说明 -->
    <div class="maskWrap" v-if="showMask">
      <div class="maskBg" @click="showMask = false"></div>
      <div class="chooseNumWrap">
        <div class="maskTitle">余额提现说明</div>
        <div class="maskExpalin" v-html="resExplainApply.content"></div>
        <div class="maskBack" @click="showMask = false">返回</div>
      </div>
    </div>
  </div>
</template>

<script>
import { RadioGroup } from "vant";
import { apiAppUserInfo, apiBalance } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      backgroundDiv: {
        backgroundImage: "url(" + require("@/assets/bMyWallet.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      showMask: false,
      shopInfo: "", //店铺信息
      resExplainApply: "", //余额提现说明
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getBalance();
    this.getAppUserInfo();
  },
  methods: {
    //余额提现说明：
    getBalance() {
      apiBalance({}).then((res) => {
        this.resExplainApply = res.data;
      });
    },
    //用户信息获取店铺押金、余额等信息
    getAppUserInfo() {
      apiAppUserInfo({}).then((res) => {
        this.shopInfo = res.data;
      });
    },
    //充值：
    jumpBRecharge() {
      this.$router.replace({
        path: "/pages/bRecharge",
        query: {
          //传递参数
        },
      });
    },
    //提现：
    jumpReplyWithdraw() {
      this.$router.replace({
        path: "/pages/bReplyWithdraw",
        query: {
          //传递参数
        },
      });
    },
    //我的银行卡
    jumpBankCarList() {
      this.$router.push({
        path: "/pages/myBankCarList",
        query: {
          //传递参数
        },
      });
    },

    //我的收益:
    jumpMyEarnings() {
      this.$router.push({
        path: "/pages/bMyEarnings",
        query: {
          //传递参数
        },
      });
    },
    //提现记录：
    jumpWthdrawRecord() {
      this.$router.push({
        path: "/pages/bWthdrawRecord",
        query: {
          //传递参数
        },
      });
    },
    //我的押金：
    jumpCashPledge() {
      this.$router.push({
        path: "/pages/bCashPledge",
        query: {
          //传递参数
        },
      });
    },
    //支付密码管理：
    jumpPayPassWord() {
      this.$router.replace({
        path: "/pages/bSetPassword",
        query: {
          //传递参数
        },
      });
    },
    //我的账单
    jumpMyBill() {
      this.$router.replace({
        path: "/pages/bMyBill",
        query: {
          //传递参数
        },
      });
    },
  },
  created() {},
  components: {
    [RadioGroup.name]: RadioGroup,
  },
};
</script>

<style scoped>
.navigator {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #181818;
}
.question {
  width: 15px;
  padding-top: 5px;
}
.rentWrap {
  width: 95%;
  margin: 0 auto;
  height: 147px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
}
.cashPledge {
  font-size: 10px;
  font-weight: 300;
  text-align: right;
  padding-right: 16px;
  padding-top: 15px;
}
.Expalin {
  text-align: center;
  font-size: 24px;
  margin-top: 0px;
}
.yang {
  font-size: 12px;
}
.date {
  text-align: center;
  font-weight: 600;
  margin-top: 5px;
}
.btnWrap {
  width: 50%;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 auto;
  margin-top: 20px;
}
.withdraw {
  width: 60px;
  height: 26px;
  line-height: 26px;
  border: 1px solid #ffffff;
  border-radius: 13px;
  text-align: center;
}
.topUp {
  color: #f48f5b;
  width: 60px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  background: #f6f6f8;
  border-radius: 13px;
}
.bottomListWrap {
  width: calc(95% - 40px);
  margin: 10px auto;
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  padding-bottom: 5px;
}
.item {
  font-size: 13px;
  font-weight: 400;
  color: #000000;
  overflow: hidden;
  margin-bottom: 25px;
}
.textExplain {
  float: left;
}
.rightArrow {
  float: right;
  width: 5px;
  height: 9px;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: calc(90% - 30px);
  background-color: #fff;
  position: fixed;
  top: 30vh;
  border-radius: 20px;
  color: #181818;
  margin-left: 5%;
  padding: 15px;
}
.maskTitle {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}
.maskExpalin {
  font-size: 10px;
  font-weight: 300;
  line-height: 20px;
}
.maskBack {
  width: 115px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  margin-top: 22px;
}
</style>
